﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>portal布局器</title>
        <link rel='stylesheet' href='../static/bootstrap-3.4.1/css/bootstrap.css'>
        <link rel='stylesheet' href='../static/fonts/font-awesome.css'>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div>
            <!--设计区域-->
            <div name="zone_div" class="flexgrid-container">
                <!-- 工具栏-->
                <div class="flexgrid-helper">
                    <span class="grid-settings">
                        <button class="btn btn-sm add-row ">添加表格行</button>
                        <button class="btn btn-sm remove-row ">删除表格行</button>
                        <button class="btn btn-sm btn-warning clear-flexgrid">清空画布</button>
                    </span>
                    <span>
                        <button class="btn btn-sm btn-info save-flexgrid"> 保存Portal入库</button>
                        <button class="btn btn-sm btn-primary fg-add-widget">添加卡片</button>
                    </span>
                </div>
                <!-- 画布-->
                <div class="flexgrid-grid"></div>
            </div>
            <div class="portlet-form">
                <div class="inner-container">
                    <div class="portlet-banner">
                        <span class="banner-title">
                            <label>卡片属性</label>
                        </span>
                    </div>
                    <div>
                        <form role="form" class="form-horizontal" id="portletOptions">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">ID</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="form_id" name="id" placeholder="卡片唯一标识" readonly>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">卡片标题</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="form_portletName" name="portletName" placeholder="请输入标题，enter生效">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">卡片分类</label>
                                <div class="col-sm-8">
                                    <select class="form-control" name="styleType">
                                        <option>list-portlet</option>
                                        <option>grid-portlet</option>
                                        <option>iconList-portlet</option>
                                        <option>todo-portlet</option>
                                        <option>iFrame-portlet</option>
                                        <option>normal-portlet</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">卡片样式</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="form_styleName" name="styleName" placeholder="请输入卡片样式，enter生效">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">是否显示更多</label>
                                <div class="col-sm-8">
                                    <select class="form-control" name="showMore">
                                        <option>否</option>
                                        <option>是</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">内容所属专题</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="form_contentNoduleId" name="contentNoduleId" placeholder="请为卡片绑定数据来源，enter生效">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-6 control-label">画布默认列数量</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" name="gridCols" readonly>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-6 control-label">画布单元格尺寸em</label>
                                <div class="col-sm-6 input-group">
                                    <input type="text" class="form-control" name="cellWidth" readonly>
                                    <span class="input-group-addon">X</span>
                                    <input type="text" class="form-control" name="cellHeight" readonly>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">卡片宽度</label>
                                <div class="col-sm-8 input-group">
                                    <input type="text" class="form-control" name="portletColspan" readonly>
                                    <span class="input-group-addon">em</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">卡片高度</label>
                                <div class="col-sm-8 input-group">
                                    <input type="text" class="form-control" name="portletRowspan" readonly>
                                    <span class="input-group-addon">em</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">卡片真实高度</label>
                                <div class="col-sm-8 input-group">
                                    <input type="text" class="form-control" name="actHeight" readonly>
                                    <span class="input-group-addon">px</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">卡片横坐标</label>
                                <div class="col-sm-8 input-group">
                                    <input type="text" class="form-control" name="portletX" readonly>
                                    <span class="input-group-addon">em</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">卡片纵坐标</label>
                                <div class="col-sm-8 input-group">
                                    <input type="text" class="form-control" name="portletY" readonly>
                                    <span class="input-group-addon">em</span>
                                </div>
                            </div>


                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script src='../static/jquery/jquery.min.js'></script>
        <script src='../static/jquery/jquery-ui.js'></script>
        <script src='../static/jquery/jquery.ui.touch-punch.min.js'></script>
        <script src="script.js"></script>
    </body>
</html>
